<template>
	<view class="quanbu">
		<view class="tapiamg">
			<view class="iamg">
				<image src="../../static/6044.png" mode=""></image>
			</view>
			<view class="zhous" @click="show=true">
				卡密兑换
			</view>
			<view class="congzhihua" @click="go">
				充值会员
			</view>
			<view class="ner">
				<view class="huj">
					当前会员等级
				</view>
				<view class="yueka">
					{{userInfo.vipName}}
				</view>
				<view class="jif">
					当前月卡：<text v-if="userInfo.memberMonthCard==null">(未购买月卡)</text>
					<text v-if="userInfo.memberMonthCard!=null">
						<text v-if="userInfo.memberMonthCard.enable">(月卡生效中)</text>
						<text v-else>(月卡已过期)</text>
					</text>
				</view>
				<view class="quany">
					<view class="quanyiimg">
						当前联系次数剩余：
					</view>
					<view class="qunner">
						{{userInfo.remainderCount}}次
					</view>
				</view>
			</view>
		</view>
		<view class="xiamina">
			<view class="yi" v-for="item,index in userInfo.memberContactsStatements" :key="index">
				<view class="zuo">
					<view class="shijian1">
						{{item.createTime}}
					</view>
					<view class="yuekashen">
						<view class="yueka1">
							次数变动:{{item.count}}
						</view>
						<view class="yueka12" v-if="item.count==0">
							（月卡会员生效中）
						</view>
					</view>
					<view class="chishu">
						<view class="chishuhui">
							次数剩余：
						</view>
						<view class="chishuhuong">
							{{item.surplus}}次
						</view>
					</view>
					<view class="chishu">
						<view class="chishuhui">
							类型：
						</view>
						<view class="chishuhuong">
							{{item.modifyMsg}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" :round="20" @close="close" mode="center" @open="open">
			<view class="popup">
				<view class="ipt">
					<u-input placeholder="输入兑换码" border="surround" v-model="value"></u-input>
				</view>
				<button @click="gocdk" :loading="loading">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		myMember,
		loadDict,
		cdk
	} from "@/request/api.js"
	export default {
		data() {
			return {
				show: false,
				loading: false,
				value: '',
				list: [],
				userInfo: {
					memberPoint: 0
				}
			}
		},
		onShow() {
			this.huiyuan()
		},
		methods: {
			gocdk() {
				this.loading = true
				cdk(this.value).then(res => {
					console.log(res);
					this.loading = false
					this.huiyuan()
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.show = false
				})
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false

			},
			go() {
				uni.switchTab({
					url: '/pages/member/member'
				})
			},
			huiyuan() {
				let that = this
				loadDict('member_rank').then(res => {
					console.log(res, '字典');
					that.vipList = res.result
					myMember().then(res => {
						// memberMonthCard == null 未购买月卡  
						// memberMonthCard != null enable==true 就是月卡生效中 false就是已过期  
						that.userInfo = res.result.loginMemberInfo
						that.userInfo.remainderCount = res.result.remainderCount
						that.userInfo.memberMonthCard = res.result.memberMonthCard
						that.userInfo.memberContactsStatements = res.result.memberContactsStatements
						that.vipList.map(data => {
							that.userInfo.vipName = data.title
							if (that.userInfo.memberPoint < data.value) {
								that.userInfo.vipLv = data.value - that.userInfo.memberPoint
								return
							}
						})
						console.log(that.userInfo, '会员信息');
					})
				})
			},
		},
	}
</script>
<style>
	page {
		background-color: #fafafa;
	}
</style>
<style scoped lang="less">
	.popup {
		padding: 20rpx;
		width: 600rpx;

		.ipt {
			margin: 20rpx 0;
		}

		button {
			border-radius: 50rpx;
			width: 40%;
			color: #fff;
			background-color: #F8492E;
		}
	}

	.tapiamg {
		position: relative;
		margin: 0 auto;
		width: 702rpx;
		height: 320rpx;
		padding-top: 44rpx;
		padding-left: 40rpx;
		padding-bottom: 40rpx;
		box-sizing: border-box;

		.iamg {
			width: 702rpx;
			height: 320rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -999;

			image {
				width: 702rpx;
				height: 320rpx;
			}
		}

		.zhous {
			position: absolute;
			top: 0;
			right: 0;
			width: 160rpx;
			height: 56rpx;
			background: rgba(255, 255, 255, 0.82);
			border-radius: 0rpx 20rpx 0rpx 32rpx;

			font-weight: 400;
			font-size: 24rpx;
			color: #440200;
			line-height: 46rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.ner {




			.huj {

				font-weight: 400;
				font-size: 24rpx;
				color: #440200;
				font-style: normal;
				text-transform: none;
			}

			.yueka {

				font-weight: bold;
				font-size: 32rpx;
				color: #440200;
				font-style: normal;
				text-transform: none;
				margin-top: 10rpx;
			}


			.jif {

				font-weight: 400;
				font-size: 24rpx;
				color: #440200;
				font-style: normal;
				text-transform: none;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.quany {
				display: flex;

				.quanyiimg {

					font-weight: 400;
					font-size: 24rpx;
					color: #440200;

					font-style: normal;
					text-transform: none;
				}

				.qunner {

					font-weight: 400;
					font-size: 24rpx;
					color: #440200;

					font-style: normal;
					text-transform: none;
				}
			}
		}
	}

	.congzhihua {
		position: absolute;
		right: 32rpx;
		bottom: 24rpx;
		width: 200rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		font-weight: 400;
		font-size: 32rpx;
		color: #F8492E;
		line-height: 72rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;

	}

	.xiamina {
		background: #FAFAFA;
	}

	.yi {
		margin: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 20rpx;
		display: flex;
		padding: 32rpx 20rpx;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;

		.zuo {
			.shijian1 {

				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				font-style: normal;
				text-transform: none;
			}

			.yuekashen {
				display: flex;
				margin: 24rpx 0;

				.yueka1 {

					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
				}

				.yueka12 {

					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					font-style: normal;
					text-transform: none;
				}
			}

			.chishu {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;

				.chishuhui {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					margin-right: 8rpx;
				}

				.chishuhuong {

					font-weight: 400;
					font-size: 28rpx;
					color: #F8492E;
					font-style: normal;
					text-transform: none;
				}
			}
		}

		.you {
			width: 260rpx;
			height: 72rpx;
			// background: rgba(248, 73, 46, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			font-weight: 400;
			font-size: 28rpx;
			color: #F8492E;
			line-height: 72rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
</style>